import Icon from '@/components/Icon'
import styles from './index.module.scss'
import type { ArtComment } from '@/type'
import { useStore } from '@/store'
import { observer } from 'mobx-react-lite'

type Props = {
  itemData: ArtComment
}

const CommentItem = ({ itemData }: Props) => {
  const { commentStore } = useStore()
  return (
    <div className={styles.root}>
      <div className="avatar">
        <img src={itemData.aut_photo} alt="" />
      </div>
      <div className="comment-info">
        <div className="comment-info-header">
          <span className="name">{itemData.aut_name}</span>
          {/* 文章评论、评论的回复 */}
          <span
            className="thumbs-up"
            onClick={() =>
              commentStore.like(itemData.com_id, itemData.is_liking)
            }>
            {itemData.like_count}
            <Icon
              type={itemData.is_liking ? 'iconbtn_like_sel' : 'iconbtn_like2'}
            />
          </span>
        </div>
        <div className="comment-content">{itemData.content}</div>
      </div>
    </div>
  )
}

export default observer(CommentItem)
